,,,,
<template>
    <han-status-bar />
    <view class="edit-field">
        <!-- 头部导航 -->
        <view class="header">
            <view class="nav-back" @click="handleBack">
                <han-icon name="return" size="38" />
            </view>
            <text class="title">{{ fieldTitle }}编辑</text>
        </view>

        <!-- 编辑修改用户名表单 -->
        <view class="form-usename" v-if="field === 'username'">
            <view class="username-hint">我的名字</view>

            <view class="username-input">
                <input
                    v-model="inputValue"
                    placeholder="用户名在20个字符之内"
                    class="input"
                    maxlength="20"
                />

                <view class="word-count">{{ inputValue.length }} / 20</view>
            </view>

            <view class="form-hint"
                >7天内只能修改一次，下次可修改时间：{{ nextUpdateTime }}</view
            >

            <button class="submit-btn" @click="handleSubmit">保存</button>
        </view>

        <!-- 编辑修改简介表单 -->
        <view class="form-bio" v-else-if="field === 'bio'">
            <view class="bio-input">
                <textarea
                    v-model="inputValue"
                    placeholder="简介内容在 100 个字符之内，编写简介让更多人了解你。"
                    class="input"
                />

                <view class="word-count">{{ inputValue.length }} / 100</view>
            </view>

            <button class="submit-btn" @click="handleSubmit">保存</button>
        </view>
    </view>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/userStores';
import { updateUsernameAPI, updateBioAPI } from '@/apis/userAPI';

import dayjs from 'dayjs';

const userStore = useUserStore();
const inputValue = ref('');
const field = ref('');
const lastUsernameUpdateTime = ref();

const handleBack = () => {
    uni.navigateBack();
};

onLoad((query) => {
    field.value = query.field;
    inputValue.value = userStore.currentUser[field.value];
});

onMounted(() => {
    lastUsernameUpdateTime.value = userStore.currentUser.lastUsernameUpdateTime;
});

// 计算下次可修改时间
const nextUpdateTime = computed(() => {
    if (!lastUsernameUpdateTime.value) return '随时可修改';
    return dayjs(lastUsernameUpdateTime.value)
        .add(7, 'day')
        .format('YYYY-MM-DD HH:mm');
});

const fieldTitle = computed(() => {
    return field.value === 'username' ? '名字' : '简介';
});

const handleSubmit = async () => {
    if (
        lastUsernameUpdateTime.value &&
        dayjs().isBefore(dayjs(lastUsernameUpdateTime.value).add(7, 'day'))
    ) {
        uni.showToast({
            title: `7天内只能修改一次，下次可修改时间：${nextUpdateTime.value}`,
            icon: 'none',
            duration: 3000
        });
        return;
    }

    if (!inputValue.value.trim()) {
        uni.showToast({
            title: '内容不能为空',
            icon: 'none'
        });

        return;
    }

    try {
        let api;
        switch (field.value) {
            case 'username':
                api = updateUsernameAPI;
                break;
            case 'bio':
                api = updateBioAPI;
                break;
        }

        const response = await api({
            userId: userStore.currentUser.userId,
            [field.value]: inputValue.value
        });

        if (response.data.success) {
            // 更新用户信息
            userStore.currentUser[field.value] = inputValue.value;
            uni.setStorageSync(
                'fullUserInfo',
                JSON.stringify(userStore.currentUser)
            );

            uni.showToast({ title: '修改成功', icon: 'none' });
            setTimeout(() => uni.navigateBack(), 1500);
        } else {
            uni.showToast({ title: response.data.message, icon: 'none' });
        }
    } catch (e) {
        console.error('修改失败:', e);
        uni.showToast({ title: '修改失败', icon: 'none' });
    }
};
</script>

<style lang="scss">
.edit-field {
    .header {
        display: flex;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid $han-global-border-color;

        .nav-back {
            position: absolute;
        }

        .title {
            font-size: $han-font-size-base;
            font-weight: bold;
            margin: auto;
        }
    }
    .form-usename {
        margin-top: 40rpx;
        padding: 0 40rpx;

        .username-hint {
            font-size: $han-font-size-md;
            color: $han-global-secondary-font-color;
        }

        .username-input {
            width: 100%;
            position: relative;
            border-bottom: 1rpx solid $han-global-border-color;

            .input {
                height: $han-input-height-sm;
                padding-right: 120rpx;
                font-size: $han-font-size-base;
            }

            .word-count {
                position: absolute;
                right: 10rpx;
                bottom: 10rpx;
                color: $han-global-secondary-font-color;
                font-size: $han-font-size-sm;
            }
        }

        .form-hint {
            margin: 20rpx 0;
            font-size: $han-font-size-sm;
            color: $han-global-secondary-font-color;
        }

        .submit-btn {
            height: $han-button-height-md;
            background-color: $han-primary-color;
            color: white;
            border-radius: $han-border-radius-lg;
            margin: auto;
        }
    }

    .form-bio {
        .bio-input {
            position: relative;
            border-bottom: 1rpx solid $han-global-border-color;

            .input {
                width: 100%;
                padding: 20rpx;
                height: 350rpx;
                font-size: $han-font-size-md;
            }

            .word-count {
                position: absolute;
                right: 10rpx;
                bottom: 10rpx;
                color: $han-global-secondary-font-color;
                font-size: $han-font-size-sm;
            }
        }

        .form-hint {
            margin: 20rpx 40rpx;
            font-size: $han-font-size-sm;
            color: $han-global-secondary-font-color;
        }

        .submit-btn {
            height: $han-button-height-md;
            background-color: $han-primary-color;
            color: white;
            border-radius: $han-border-radius-lg;
            margin: 40rpx;
        }
    }
}
</style>
